<div class="playlistsView">
    <h1> {{ ::title }}</h1>

    <!-- Song list wrapper -->
    <div class="playlistsView_inner">
        <ul class="songList">
            <li class="songList_item" ng-repeat="data in data"
                ng-class="{ playlist: data.kind  }"
                data-kind="{{ data.kind }}"
                ng-if="data.kind == 'playlist'"
                data-playlist-hidden="true"
                id="{{data.id}}">

                <h4 class="songList_item_song_user" collapsible>{{ data.title }} playlist - <span>show</span></h4>
                <span class="mediaBox_item_info">
                    <i class="fa fa-list"></i> {{ data.track_count }}
                </span>
                <span class="mediaBox_item_info">
                    <i class="fa fa-clock-o"></i> {{ formatSongDuration (data.duration) }}
                </span>
                <span class="songList_item_song_info">
                    <a ng-click="removePlaylist(data.id)"> <i class="fa fa-trash"></i> delete playlist</a>
                </span>

                <ul class="songList_item_songs_list">
                    <li class="songList_item_songs_list_item"
                        ng-repeat="tracks in data.tracks"
                        ng-class="{ active: hover }"
                        ng-mouseover="hover = true"
                        ng-mouseleave="hover = false"
                        id="{{tracks.id}}">

                        <div class="songList_item_container_artwork">
                            <span class="songList_item_song_button"
                                  song
                                  data-song-url="{{ tracks.stream_url }}"
                                  data-song-thumbnail="{{ tracks.artwork_url }}"
                                  data-song-title="{{ tracks.title }}"
                                  data-song-user="{{ tracks.user.username }}"
                                  data-song-user-id="{{ tracks.user.id }}"
                                  data-song-id="{{ tracks.id }}"
                                  data-play-list="true" >

                            <i class="fa fa-play"></i>
                            <i class="fa fa-pause"></i>
                        </span>
                            <img ng-src="{{ checkForPlaceholder(tracks.artwork_url) }}" alt="{{ tracks.title }}" class="songList_item_artwork">
                        </div>

                        <div class="songList_item_container_info">
                            <h2 class="songList_item_song_tit selectable-text">{{ tracks.title }}</h2>
                            <h4 class="songList_item_song_user">
                                <span class="songList_item_song_info" ui-sref="profile({id: {{ tracks.user.id }}})">by: {{ tracks.user.username }} </span>
                                <span class="songList_item_song_info">{{ formatSongDuration (tracks.duration) }}</span>
                                <span class="songList_item_song_info">
                                    <a ng-click="removeFromPlaylist(tracks.id, data.id)"> <i class="fa fa-trash"></i> remove</a>
                                </span>
                            </h4>
                        </div>

                    </li>
                </ul>

            </li>
        </ul>
    </div>
    <!-- Song list wrapper / end -->

</div>